<template>
  <!--车险费率  编辑  查看  新增页 共用-->
  <Card >
    <span style="font-weight: bold;font-size:18px;font-family: 微软雅黑;">车险费率</span>
    <Form ref="formInline" :model="formDatas" :rules="ruleInline" style="width:1000px;margin:0px auto">
      <Row type="flex" align="middle" class="row-style">
        <Col span="3"  class="row-col-style3">名称:</Col>
        <Col span="12"  class="row-col-style2">
        <FormItem label="" prop="name" class="form-style">
          <Input v-model="formDatas.name"  placeholder="请输入" v-if="type==1||type==0"></Input>
          <span v-text="formDatas.name" v-if="type==2"></span>
        </FormItem>
        </Col>
        <Col span="3"  class="row-col-style3">描述:</Col>
        <Col span="6"  class="row-col-style2">
        <FormItem label="" prop="remark" class="form-style">
          <Input v-model="formDatas.remark"  placeholder="请输入" v-if="type==1||type==0"></Input>
          <span v-text="formDatas.remark" v-if="type==2"></span>
        </FormItem>
        </Col>
        </Row>
        <Row type="flex" align="middle" class="row-style">
         <Col span="3"  class="row-col-style3">最低费用:</Col>
        <Col span="12"  class="row-col-style2">
        <FormItem label="" prop="minFee" class="form-style">
          <Input v-model="formDatas.minFee"  placeholder="请输入" v-if="type==1||type==0"></Input>
          <span v-text="formDatas.minFee" v-if="type==2"></span>
        </FormItem>
        </Col>
          <Col span="3"  class="row-col-style3">最高费用:</Col>
        <Col span="6"  class="row-col-style2">
        <FormItem label="" prop="maxFee" class="form-style">
          <Input v-model="formDatas.maxFee"  placeholder="请输入" v-if="type==1||type==0"></Input>
          <span v-text="formDatas.maxFee" v-if="type==2"></span>
        </FormItem>
        </Col>
        </Row>
        <Row type="flex" align="middle" class="row-style">
        <Col span="3"  class="row-col-style3">费用百分比:</Col>
        <Col span="12"  class="row-col-style2">
        <FormItem label="" prop="percentage" class="form-style">
          <Input v-model="formDatas.percentage"  placeholder="请输入" v-if="type==1||type==0"></Input>
          <span v-text="formDatas.percentage" v-if="type==2"></span>
        </FormItem>
        </Col>
          <Col span="3"  class="row-col-style3">状态:</Col>
        <Col span="6"  class="row-col-style2">
        <FormItem label="" class="form-style">
          <Select v-model="formDatas.status" v-if="type==1||type==0" >
            <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <span v-text="getOptionValue(statusList,formDatas.status)" v-if="type==2"></span>
        </FormItem>
        </Col>
      </Row>
      <br/>
      <br/>
      <Card>
        <Row v-if="type==1||type==0" style="text-align: center">
          <Button type="primary" @click="saveOrUpdate()">确定</Button>
          <Button type="primary" @click="resetForm" style="margin-left: 20px;">重置</Button>
          <Button type="primary" @click="handleGoBack" style="margin-left: 20px;">返回</Button>
        </Row>
           <Row v-else style="text-align: center">
          <Button type="primary" v-show="formDatas.status == 9" @click="changeTypeToEdit()" style="margin-left: 20px;">编辑</Button>

          <Button type="primary" @click="handleGoBack">返回</Button>
        </Row>
      </Card>
    </Form>
  </Card>
</template>
<script>
const validateName = (rule, value, callback) => {
  if (value !== null && value.length > 15) {
    callback(new Error('输入参数过长'))
  } else if (value == null || value === '') {
    callback(new Error('名称不能为空'))
  } else {
    callback()
  }
}
const validateRemark = (rule, value, callback) => {
  if (value !== null && value.length > 15) {
    callback(new Error('输入参数过长'))
  } else if (value == null || value === '') {
    callback(new Error('描述不能为空'))
  } else {
    callback()
  }
}
const validateMinFee = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的最低费用'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validateMaxFee = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的最高费用'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validatePercentage = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的费用百分比'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
export default {
  data () {
    return {
      $ajax: null,
      defaultFormData: {},
      statusList: [
        {
          value: '0',
          label: '使用中'
        },
        {
          value: '1',
          label: '拒绝'
        },
        {
          value: '9',
          label: '待审核'
        },
        {
          value: '10',
          label: '停用'
        }
      ],
      // 绑定实体对象属性
      formDatas: {
        name: null,
        remark: null,
        minFee: null,
        maxFee: null,
        percentage: null,
        status: null
      },
      type: 0, // 1 编辑   0 新增     2 查看
      ruleInline: {
        minFee: [{
          validator: validateMinFee,
          trigger: 'blur'
        }], // 最低费用
        maxFee: [{
          validator: validateMaxFee,
          trigger: 'blur'
        }], // 最高费用
        percentage: [{
          validator: validatePercentage,
          trigger: 'blur'
        }], // 百分比
        name: [{
          validator: validateName,
          trigger: 'blur'
        }],
        remark: [{
          validator: validateRemark,
          trigger: 'blur'
        }]
      } // 校验规则
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initPage()
  },
  computed: {
    path () {
      return this.$route.path
    },

    index () {
      return this.$route.query.index
    }
  },
  mounted () { },
  methods: {
  // 返回上一页
    handleGoBack () {
      this.$router.back()
    },

    handleRouterGo (path) {
      this.$router.push(path)
    },

    changeTypeToEdit () {
      this.type = 1
    },

    // 通用获取下拉框的文本信息
    getOptionValue (optionArray, keyValue) {
      for (var i = 0; i < optionArray.length; i++) {
        if (optionArray[i].value === keyValue) {
          return optionArray[i].label
        }
      }
      return ''
    },

    initPage () {
      var type = this.$route.query.type
      this.type = type
      if (type === 1 || type === 2) {
        const vm = this
        vm.$ajax.get(vm.$appContext.marvels_core_product + '/product/param/carFeeParam/service/getCarFeeKey/' + vm.index).then(re => {
          var data = re.data
          debugger
          vm.formDatas = data.data
          vm.formDatas.status = vm.formDatas.status ? vm.formDatas.status + '' : ''
          this.defaultFormData = JSON.parse(JSON.stringify(vm.formDatas))
        }).catch(er => {

        })
      }
    },
    // 确认提交
    saveOrUpdate () {
      const vm = this
      this.$refs.formInline.validate(valid => {
        if (valid) {
          var params = vm.formDatas
          if (vm.type === 0) {
            // 保存
            this.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/carFeeParam/service/saveCarFee', params).then(re => {
              var data = re.data
              var code = data.code
              var message = data.message
              if (code !== 'success') {
                this.$Message.warning(message)
                return
              }
              this.$Message.success('添加成功')
              // 返回列表页
              vm.$router.push({
                name: 'car_fee_list'
              })
            }).catch(er => {

            })
          } else {
            // 更新
            var requestParams = vm.formDatas
            this.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/carFeeParam/service/updateCarFee', requestParams).then(re => {
              var data = re.data
              var code = data.code
              var message = data.message
              if (code !== 'success') {
                this.$Message.warning(message)
                return
              }
              this.$Message.success('更新成功')
              // 返回列表页
              vm.$router.push({
                name: 'car_fee_list'
              })
            }).catch(er => {

            })
          }
        }
      })
    },
    resetForm () {
      this.formDatas = JSON.parse(JSON.stringify(this.defaultFormData))
    }
  }
}
</script>

<style lang="less">
@import '../../../styles/common.less';
@import '../../../styles/table.less';
.row-col-style {
  color: #2d8cf0;

}
.row-col-style3 {

  text-align: left;
}
.row-col-style2 {

}
.ivu-form-item{
  margin-bottom:0px
}
.row-style{
  margin-top:30px
}
.form-style{
  width:248px
}

</style>
